<template>
  <div>
      <!-- 接口：https://api.xin88.top/game/items.json -->
      <div v-if="data" class="box">
        <div v-for="{name,price,itemId,iconPath} in data.items" :key="itemId">
          <img :src="iconPath" alt="">
          <span>{{name}}</span>
          <span>{{price}}</span>
        </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        data: null
      }
    },
    methods: {
      getData() {
        const url = 'https://api.xin88.top/game/items.json'
        axios.get(url).then(res=>{
          console.log(res);
          this.data = res.data
        })
      }
    },
    mounted () {
      this.getData()
    },
  }
</script>

<style lang="scss" scoped>
.box{
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: #1e2128;
  >div{
    display: flex;
    flex-direction: column;
    margin: 0 10px 10px 0;
    border:1px solid #777;
    padding: 20px;
    align-items: center;
    color: white;

    >img{
      width: 100px;
      height: 100px;
    }

    >span:nth-child(2){
      margin: 10px 0;
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    >span:last-child{
      color: #ab965d;
    }
  }
}
</style>
